<template>
  <div class="login-bg">
    <div class="login">
      <div class="message">医院医疗系统</div>
      <div id="darkbannerwrap"></div>
      <!-- 大小：表单中的所有子组件都继承了该表单的 size 属性 分为large default small -->
      <!-- 通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部 -->
      <!-- 校验表单1：:rules="rules"  ref="ruleFormRef"-->
      <el-form
        :model="form"
        label-width="120px"
        size="large"
        label-position="top"
        ref="ruleFormRef"
        :rules="rules"
      >
        <!-- 校验表单2：prop="userName"-->
        <el-form-item label="账号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"/>
        </el-form-item>
        <el-radio-group v-model="form.type">
          <el-radio label="1">病人</el-radio>
          <el-radio label="2">医生</el-radio>
          <el-radio label="3">药房</el-radio>
          <el-radio label="4">管理员</el-radio>
        </el-radio-group>
        <!-- 布局 -->
        <!-- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 -->
        <el-row :gutter="20">
          <!-- 通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。 -->
          <el-col :span="8" :offset="18">
            <el-form-item>
              <!-- 自定义按钮  -->
              <!-- 校验表单3：@click="onSubmit(ruleFormRef)-->
              <el-button
                color="#189f92"
                type="primary"
                @click="onSubmit(ruleFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
  
<script>
export default {
      name:'h-Login'    
  }
</script>

<script  setup>
import { reactive, ref } from "vue"; //数据必须是响应式的
import Axios from "axios"; //导入axios
import { useRouter } from "vue-router"; //导入路由
import { ElMessage } from "element-plus"; //导入弹窗

// 必须先声明调用
const router = useRouter(); // router 对应了中的 $router 对象

// 校验表单4 定义规则
const rules = reactive({
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 11, max: 11, message: "用户名长度在11位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 20, message: "密码长度在3~10位", trigger: "blur" },
  ],
});

// 定义数据
const form = reactive({
  phone: "",
  password: "",
  type: "",
});

const ruleFormRef = ref(null);
// 改写提交按钮
const onSubmit = () => {
  // 校验表单5：提交前校验
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      //   axios前后端交互
      if (form.type == "1") {
        Axios({
          method: "post",
          url: "/member/loginByPatient", //相对路径 会在baseURL路径后继续拼接 因此完整url为http://localhost:8081/user/login
          params: {
            phone: form.phone, // 变量名: 变量值
            password: form.password,
            type:form.type
          },
        }).then((res) => {
          
          if (res.data.code == 1) {
            console.log(res.data);
            //成功可关闭弹窗
            ElMessage({
              showClose: true,
              message: "用户登陆成功！",
              type: "success",
            });
            // 携带参数跳转
            router.push({
              name: "Patient",
              query: { userName: form.username },
            });
          } else {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        });
      }

      if (form.type == "4") {
        Axios({
          method: "post",
          url: "/user/loginByDoctor", //相对路径 会在baseURL路径后继续拼接 因此完整url为http://localhost:8081/user/login
          params: {
            phone: form.phone, // 变量名: 变量值
            password: form.password,
            type:form.type
          },
        }).then((res) => {
          if (res.data == true) {
            //成功可关闭弹窗
            ElMessage({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
            // 携带参数跳转
            router.push({
              name: "Admin",
              query: { userName: form.phone },
            });
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: "error",
            });
          }
        });
      }
    } else {
      return false;
    }
  });
};
</script>
  
  <style scoped>
.login-bg {
  /*background: #eeeeee url() 0 0 no-repeat;*/
  background: url(../assets/3.png) no-repeat center;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.login {
  margin: 120px auto 0 auto;
  min-height: 420px;
  max-width: 420px;
  padding: 40px;
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  /* overflow-x: hidden; */
  box-sizing: border-box;
}
.login .message {
  margin: 10px 0 0 -58px;
  padding: 18px 10px 18px 60px;
  background: #189f92;
  position: relative;
  color: #fff;
  font-size: 16px;
}
.login #darkbannerwrap {
  background: url(../assets/3.png);
  width: 18px;
  height: 10px;
  margin: 0 0 20px -58px;
  position: relative;
}
</style>